/* 文章 */
var ArticleItem = require("./item.js");
var Tool = require("../common/tool.js");
var ArticleList = React.createClass({
    // getDefaultProps: function(){
    //     return {
    //         articleList: new Array({},{},{},{},{})
    //     }
    // },
    getInitialState:function(){
        var articles = [{},{},{},{},{}];
        // var articles = [
        //     {"id":1,
        //         "topic":"好玩的活动",
        //         "description":"本次活动在西湖举行,扫二维码看详情",
        //         "imgUrl":"http://nos.netease.com/mini-findout-test/1.jpeg",
        //         "mlink":"http://www.baidu.com"
        //         },{"id":1,
        //         "topic":"好玩的活动2",
        //         "description":"本次活动在西湖举行,扫二维码看详情2",
        //         "imgUrl":"http://nos.netease.com/mini-findout-test/1.jpeg",
        //         "mlink":"http://www.baidu.com"
        //         },{"id":1,
        //         "topic":"好玩的活动3",
        //         "description":"本次活动在西湖举行,扫二维码看详情3",
        //         "imgUrl":"http://nos.netease.com/mini-findout-test/1.jpeg",
        //         "mlink":"http://www.baidu.com"
        //         }
        // ];
        // var that = this;
        // var articles = new Array({},{},{},{},{});
        // Tool.get('/operating').then(function(data){
        //     // debugger;
        //     for(var i=0; i<data.list.length; i++){
        //         articles[i] = JSON.parse(JSON.stringify(data.list[i]));
        //     }
        //     that.setState({
        //         articleList: articles
        //     });
        // });
        
        return {
            // articleList : new Array({},{},{},{},{}),
            articleList : articles,
            
        }
    },
    componentWillMount:function(){
        var that = this;
        var articles = new Array({},{},{},{},{});
        Tool.get('/operating').then(function(data){
            // debugger;
            for(var i=0; i<data.list.length; i++){
                articles[i] = JSON.parse(JSON.stringify(data.list[i]));
            }
            that.setState({
                articleList: articles
            });
        });
    },

    changehandle:function(name, index){
        var that = this;
        // debugger 这里要返回一个函数，供子附件调用
        return function(event){
            var _temp = that.state.articleList;
            _temp[index][name] = event.target.value;
            // that.setState({[name]: event.target.value});
            that.setState({
                articleList: _temp
            })
        }
    },

    clear:function(index){
        var that = this;
        // 这里要返回一个函数，供子组件调用，不然会出现死循环的现象:子组件在render里执行了父组件的clear方法，然后这里又setState了，出现死循环。
        // return function(){
        //     var _temp = that.state.articleList;
        //     _temp[index]={};
        //     that.setState({
        //         articleList: _temp
        //     })
        // }
            var _temp = that.state.articleList;
            _temp[index]={};
            that.setState({
                articleList: _temp
            })
    },

    // 发布文章，调用子组件暴露出的获取数据方法
    pub: function(){
        var newArticle = [];
        var that = this;
        Object.keys(this.refs).map(function(item){
            if(that.refs[item].getValue()){
                newArticle.push(that.refs[item].getValue());
            }
            
        });
        if(newArticle.length > 0){
            Tool.postJSON('/operating/add', newArticle).then(function(){
                alert("发布成功");
            })
        }
    },

    // 清空列表
    clearAll:function(){
        // 调用清空state没用，用户自己修改的input的value值清不掉。清空不掉子组件里的input[type=file]值。
        // this.setState({
        //     articleList:[{},{},{},{},{}]
        // })

        var that = this;
        Object.keys(this.refs).forEach(function(item){
            that.refs[item].clear();
        });
        // for(var i=0; i<this.state.articleList.length; i++){
        //     var sub = "item" + i;
        //     this.refs[sub].clear();
        // }
    },
    render: function(){
        var self = this;
    
        return (
           <div>
           {
            this.state.articleList.map(function(item, index){
                return( <ArticleItem ref={"item"+index} key={index} item={item} index={index} changehandle={self.changehandle} clear={self.clear}/>)
            })
           }
           <div className="btn-group">
                <button className="btn-clr" onClick={this.clearAll}>清空全部</button>
                <button className="btn-pub" onClick={this.pub}>发布</button>
           </div>
           </div>
        )
        
    },

});
module.exports =  ArticleList;




